<template>
  <div class="hello">
    <!-- 人脸识别 -->
    <!-- <div v-if="isShowOne">
      <el-button
        type="primary"
        @click="faceFun"
        :disabled="IsCode"
        style="margin-top:20px;width:100%;border-radius: 25px;"
        v-if="isShow"
        >开始识别</el-button
      >
      <el-button
        type="primary"
        @click="completeSign"
        style="margin-top:20px;width:100%;border-radius: 25px;"
        v-else
        >完成签约</el-button
      >
    </div>

    <div v-else>
      <p>正在签约，等待后台提交签约</p>
    </div> -->
    <div v-if="isShow">
      <p class="text">请根据真人识别提醒完成识别操作</p>
      <div class="imgStyle">
        <img src="../assets/img/content.png" alt="" class="img"/>
      </div>
      <el-button
          type="primary"
          @click="faceFun"
          :disabled="IsCode"
          style="margin-top:20px;width:280px;border-radius: 25px;"
      >开始识别
      </el-button
      >
    </div>
    <div v-else>
      <div class="imgStylecg">
        <img
            src="../assets/img/chenggong.png"
            v-if="chenggong == true"
            alt=""
            class="img"
        />
        <img
            src="../assets/img/chenggong.png"
            v-if="shibai == true"
            alt=""
            class="img"
        />
      </div>
      <p class="wanchengText" v-if="chenggong == true">真人识别成功</p>
      <p class="wanchengText" v-if="shibai == true">真人识别失败</p>
      <el-button
          type="primary"
          @click="completeSign"
          v-if="chenggong == true"
          style="margin-top:70px;width:280px;border-radius: 25px;"
      >确认签约
      </el-button
      >
      <el-button
          type="primary"
          @click="faceFun"
          v-if="shibai == true"
          style="margin-top:70px;width:280px;border-radius: 25px;"
      >重新识别
      </el-button
      >
    </div>
    <!-- 确认签约后弹出框 -->
    <el-dialog
        :visible.sync="dialogVisible"
        width="80%"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <div v-if="qyzShow">
        <div class="diaImg">
          <img src="../assets/img/chulizhong.png" alt=""/>
        </div>
        <p class="tit">签约中</p>
        <p class="content">合同正在审核中，请耐心等待5分钟左右</p>
        <span>已等待{{ str }}</span>
      </div>
      <div v-if="cgShow">
        <div class="diaImg"><img src="../assets/img/cg.png" alt=""/></div>
        <p class="tit">恭喜您，签约成功！</p>
        <p class="content">请及时关注</p>
        <span>已等待{{ str }}</span>
      </div>
      <div v-if="sbShow">
        <div class="diaImg"><img src="../assets/img/sb.png" alt=""/></div>
        <p class="tit">很遗憾，签约失败</p>
        <p class="content">原因：{{ sbContent }}</p>
        <span>已等待{{ str }}</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  postInitFace,
  postFaceCheck,
  completeSign,
  getStatus
} from "../assets/js/api";
import axios from "axios";

export default {
  name: "face",
  data() {
    return {
      faceUrl: "",
      code: "",
      id: "",
      IsCode: false,
      isShow: true,
      isShowOne: false,
      chenggong: false,
      shibai: false,
      dialogVisible: false,
      cgShow: false,
      sbShow: false,
      qyzShow: true,
      hour: 0, //定义时，分，秒，毫秒并初始化为0；
      minute: 0,
      ms: 0,
      second: 0, //秒
      time: "",
      str: "",
      data: {
        name: 10,
        age: 20
      },
      timeList: null,
      sbContent: ""
    };
  },
  created() {
    this.id = sessionStorage.getItem("userId");
    let that = this;
    let str = window.location.href;
    let index = str.lastIndexOf("=");
    this.code = str.substring(index + 1, str.length);
    console.log('code:', this.code)
    if (this.code == 200) {
      that.IsCode = true;
      that.faceCheck();
    }
  },
  // mounted() {
  //   window.onbeforeunload = function() {
  //     localStorage.clear();
  //     sessionStorage.clear();
  //   };
  // },
  methods: {
    faceFun() {
      let form = {};
      form.id = this.id;
      form.metaInfo = JSON.stringify(getMetaInfo());
      postInitFace(this.id, form).then(res => {
        if (res.code == 200) {
          this.faceUrl = res.data.resultObject.certifyUrl;
          var a = document.createElement("a");
          a.setAttribute("href", this.faceUrl);
          document.body.appendChild(a);
          a.click();
        }
      });
    },
    faceCheck() {
      console.log('识别....')
      postFaceCheck(this.id).then(res => {
        if (res.code == 200) {
          this.isShow = false;
          this.chenggong = true;
        } else {
          this.shibai = true;
        }
      });
    },
    //完成签约
    completeSign() {
      let that = this;
      that.dialogVisible = true;
      that.time = setInterval(that.timer, 50);
      // 计时器
      completeSign(that.id).then(res => {
        if (res.code == 200) {
          that.timeList = setInterval(function () {
            getStatus(that.id)
                .then(res => {
                  if (res.code == 200) {
                    console.log(res);
                    if (res.data == null) {
                      that.isShowOne = false;
                      that.chenggong = false;
                      that.qyzShow = true;
                      that.cgShow = false;
                      // clearInterval(this.time);
                      // clearInterval(this.timeList);
                    } else if (res.data.status == false) {
                      clearInterval(that.time);
                      clearInterval(that.timeList);
                      that.cgShow = false;
                      that.qyzShow = false;
                      that.sbShow = true;
                      that.sbContent = res.data.text;
                    } else if (res.data.status == true) {
                      clearInterval(that.timeList);
                      clearInterval(that.time);
                      that.sbShow = false;
                      that.qyzShow = false;
                      that.cgShow = true;
                    }
                  }
                })
                .catch(() => {
                  clearInterval(this.time);
                  this.qyzShow = false;
                  this.sbShow = true;
                  this.cgShow = false;
                });
          }, 6000);
        } else {
          this.$message.error(res.message);
        }
      });
      //执行内容
    },

    timer() {
      //定义计时函数

      this.ms = this.ms + 50; //毫秒

      if (this.ms >= 1000) {
        this.ms = 0;

        this.second = this.second + 1; //秒
      }

      if (this.second >= 60) {
        this.second = 0;

        this.minute = this.minute + 1; //分钟
      }

      if (this.minute >= 60) {
        this.minute = 0;

        this.hour = this.hour + 1; //小时
      }

      this.str =
          this.toDub(this.minute) +
          "分" +
          this.toDub(this.second) +
          "秒"; /*+""+this.toDubms(this.ms)+"毫秒"*/

      // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
    },

    toDub(n) {
      //补0操作

      if (n < 10) {
        return "0" + n;
      } else {
        return "" + n;
      }
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  padding: 50px 20px;
}

.text {
  font-size: 15px;
  color: #333333;
  margin: 20px 0 40px 0;
}

.imgStyle {
  width: 240px;
  height: 260px;
  margin: 0 auto;
}

.imgStylecg {
  width: 75px;
  height: 75px;
  margin: 0 auto;
  padding-top: 80px;
}

.img {
  width: 100%;
  height: 100%;
}

.wanchengText {
  font-size: 15px;
  color: #333333;
  margin-top: 20px;
}

.diaImg {
  width: 60px;
  height: 50px;
  margin: 0 auto;
}

.diaImg > img {
  width: 100%;
  height: 100%;
}

::v-deep .el-dialog__header {
  padding: 0;
}

.tit {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin: 15px 0 25px 0;
}

.content {
  font-size: 14px;
  color: #333333;
  margin-bottom: 10px;
}
</style>
